<template>
  <div id="RoomTypeSetting">
    <div class="content">
      <Menu></Menu>
      <div class="table">
        <div class="top">
          <span>房型名称</span>
        </div>
        <el-button style="margin-left: 30px;"
                   type="primary"
                   size="small"
                   @click="handleSearch"
                   icon="el-icon-search">查 询
        </el-button>
      </div>
    </div>
  </div>
</template>

<script>
import Menu from '../../components/Menu'

export default {
  name: 'ListAccount',
  components: {
    Menu
  },
  created () {
    if (window.Notification) {
      // 浏览器通知--window.Notification
      if (Notification.permission == "granted") {
        console.log("允许通知")
      } else if (Notification.permission != "denied") {
        console.log("需要通知权限")
        Notification.requestPermission((permission) => { });
      }
    } else {
      console.error('浏览器不支持Notification');
    }

  },
  methods: {
    handleSearch () {
      this.setNotification("信息哦")

      this.popNotice('你', 'show me the code')
    },

    popNotice (user, content) {
      let that = this;
      if (Notification.permission == "granted") {
        let notification = new Notification(user, {
          body: content,
        });

        notification.onclick = function (e) {
          that.$nextTick(() => {
            setTimeout(() => {
              //具体操作
              //例如:
              window.open("http://www.baidu.com", "_brank")
            }, 500);
          });
          //可直接打开通知notification相关联的tab窗
          window.focus();
          notification.close();
        };
      }
    },

    setNotification (content) {
      let _this = this
      let notify = new Notification('新消息来啦！', {
        body: content,
        lang: 'zh-CN',
      })
      notify.onshow = function () {
        console.log('通知显示!')
      }
      notify.onclick = function () {
        console.log('windows弹窗点击通知')
        window.focus()
        window.location.href = 'https://www.baidu.com/'
        notify.close()
      }
      notify.onerror = function () {
        console.log('通知错误!')
        // 手动关闭
        notify.close()
      }
      notify.onclose = function () {
        console.log('通知关闭')
      }
    },
  }
}

</script>

<style lang="scss" scoped>
.content {
  .table {
    padding-left: 30px;
    margin-left: 150px;
    background-color: aqua;
  }
}
</style>